import { useEffect, useState, useCallback } from 'react'
import {
  IHeaderBox,
  IPieRoseTypeCharts,
  IBarCharts,
  ISwitch
} from '@/components/index'
import { colChartStat, colChartStatByGrade, cirChartStat } from '@/axios/nature'
import { gradeList } from '@/axios/school'

import { Tabs } from '@nutui/nutui-react-taro'
import { getClassListByChart } from '@/axios/school'
import { View, ScrollView } from '@tarojs/components'
import './index.scss'

interface PTProps {
  gradeData?: API.GradeItem[]
}

const PTIndex: React.FC<PTProps> = props => {
  // const { gradeData = [] } = props
  const [gradeData, setGradeData] = useState<API.GradeItem[]>([])

  const [cirChartData, setCirChartData] = useState<API.ChartStatItem[]>([])
  const [barChartData, setBarChartData] = useState<API.ChartStatItem[]>([])
  const [barOfGradeChartData, setBarOfGradeChartData] = useState<
    API.ChartStatItem[]
  >([])
  const [currentGrade, setCurrentGrade] = useState<number>(0)
  const [currentClass, setCurrentClass] = useState<API.OptionItem>({})
  const [options, setOptions] = useState<API.OptionItem[]>([])

  const [triggered, setTriggered] = useState<boolean>(false)

  const getChartData = async () => {
    try {
      const results = await colChartStat()
      setBarChartData(results)
      const cirResults = await cirChartStat()
      setCirChartData(cirResults || [])
      setTriggered(false)
    } catch {}
  }

  const getStaticData = useCallback(async () => {
    try {
      if (currentGrade != 0 && Object.keys(currentClass).length > 0) {
        const results = await colChartStatByGrade({
          gradeCode: currentGrade,
          classId: currentClass.value
        })
        setBarOfGradeChartData(results)
      }
    } catch {}
  }, [currentGrade, currentClass])

  const getClassData = useCallback(async () => {
    try {
      if (currentGrade == 0) {
        setOptions([])
        return
      }
      const result = await getClassListByChart({ grade: currentGrade })
      const optionsData = result?.map(item => ({
        value: item.classId,
        text: item.className
      }))
      if (optionsData.length > 0) {
        setCurrentClass(optionsData[0])
      }
      setOptions(optionsData)
    } catch {}
  }, [currentGrade])

  const onRefresh = () => {
    setCurrentGrade(0)
    getChartData()
    getStaticData()
    setTriggered(true)
  }

  useEffect(() => {
    getChartData()
  }, [])

  useEffect(() => {
    getClassData()
  }, [getClassData])

  useEffect(() => {
    getStaticData()
  }, [getStaticData])
  useEffect(() => {
    // 查询学校已有年级
    getGradeData()
  }, [])
  const getGradeData = async () => {
    try {
      const results = await gradeList()
      setGradeData(results || [])
    } catch {}
  }
  return (
    <ScrollView
      scrollY
      className='scrollview'
      onRefresherRefresh={onRefresh}
      enableBackToTop
      refresherEnabled
      refresherTriggered={triggered}
      scrollWithAnimation
    >
      <View className='common_page'>
        <View className='card_box chart_box'>
          <IHeaderBox title='性格类型比例' />
          <IPieRoseTypeCharts
            id='pt_pie_chart'
            data={cirChartData}
            fieldNames={{ label: 'name', value: 'totalNum' }}
          />
        </View>
        <ISwitch
          options={gradeData}
          current={currentGrade}
          onChange={(value: number) => setCurrentGrade(value)}
        />
        <View className='card_box'>
          <IHeaderBox
            title='性格维度统计'
            type={1}
            options={options}
            selectData={currentClass}
            handleChange={(value: API.OptionItem) => setCurrentClass(value)}
          />
          <Tabs value={currentGrade}>
            <Tabs.TabPane value={0} key={0} title='0'>
              <IBarCharts id='pt_chart' data={barChartData} fontSize={9} />
            </Tabs.TabPane>
            {gradeData?.map(item => (
              <Tabs.TabPane
                value={item.gradeCode}
                key={item.gradeCode}
                title={item.gradeName}
              >
                <IBarCharts
                  id={`pt_chart_${item.gradeCode}`}
                  data={barOfGradeChartData}
                />
              </Tabs.TabPane>
            ))}
          </Tabs>
        </View>
      </View>
    </ScrollView>
  )
}

export default PTIndex
